<template>
<!-- 优惠劵管理页面 -->
  <div>
    <el-card>
    <!-- 模糊查框 -->
    <div class="abvoeBox">
            <span>优惠劵名称:</span>
            <el-input placeholder="请输入内容" v-model="couponName" class="abvoeBox_input"></el-input>
            <span style="margin-left:10px;">优惠劵使用规则:</span>
            <el-select v-model="couponUseRule" placeholder="请选择优惠劵使用规则">
                <el-option label="无门槛" value="1"></el-option>
                <el-option label="早餐" value="2"></el-option>
                <el-option label="夜宵" value="3"></el-option>
            </el-select>
            <span style="margin-left:10px;">吃货豆规则:</span>
            <template>
                <el-radio v-model="foodieBeanRule" label="0" style="margin-left:5px;">不可以使用</el-radio>
                <el-radio v-model="foodieBeanRule" label="1" style="margin-left:5px;">可以使用</el-radio>
            </template>
            <span style="margin-left:10px;">结束标识:</span>
            <template>
                <el-radio v-model="endFlag" label="0" style="margin-left:5px;">未结束</el-radio>
                <el-radio v-model="endFlag" label="1" style="margin-left:5px;">已结束</el-radio>
            </template>
            <el-button type="primary" @click="selectFoodieBeanEntityList()" style="margin-left:10px">查询</el-button>
            <el-button @click="empty()" style="margin-left:10px">清空</el-button>
            <el-button type="success" @click="openSaveCouponEntityDialogVisible()" style="margin-left:10px">添加</el-button>
    </div>
    <!-- 全查数据 -->
    <div class="belowBox">
        <div class="belowBox">
        <el-table
            :data="tableData"
            style="width: 100%;">
            <el-table-column type="expand">
            <template slot-scope="props">
                <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="优惠劵名称">
                    <span>{{ props.row.couponName }}</span>
                </el-form-item>
                <el-form-item label="使用规则">
                    <span>{{props.row.couponUseRule===1?"无门槛":props.row.couponUseRule===2?"早餐":props.row.couponUseRule===3?"夜宵":"未知"}}</span>
                </el-form-item>
                <el-form-item label="优惠劵规则">
                    <span>{{ '满'+props.row.couponRule+'元' }}</span>
                </el-form-item>
                <el-form-item label="优惠价钱">
                    <span>{{ props.row.couponPrice+'元' }}</span>
                </el-form-item>
                <el-form-item label="吃货豆规则">
                    <span>{{props.row.foodieBeanRule===0?"不可以使用":"可以使用"}}</span>
                </el-form-item>
                <el-form-item label="吃货豆数量" v-if="props.row.foodieBeanRule===1">
                    <span>{{ props.row.foodieBeanNumber }}</span>
                </el-form-item>
                <el-form-item label="结束标识">
                    <span>{{ props.row.useFlag===0?"未使用":"已使用" }}</span>
                </el-form-item>
                <el-form-item label="开始时间">
                    <span>{{ props.row.startTime }}</span>
                </el-form-item>
                <el-form-item label="结束时间">
                    <span>{{ props.row.endTime }}</span>
                </el-form-item>
                <el-form-item label="创建时间">
                    <span>{{ props.row.createTime}}</span>
                </el-form-item>
                <el-form-item label="修改时间">
                    <span>{{ props.row.updateTime}}</span>
                </el-form-item>
                </el-form>
            </template>
            </el-table-column>
            <el-table-column
            label="优惠劵名称"
            prop="couponName">
            </el-table-column>
            <el-table-column
            label="开始时间"
            prop="startTime">
            </el-table-column>
            <el-table-column
            label="结束时间"
            prop="endTime">
            </el-table-column>
            <el-table-column
            label="结束标识"
            prop="endFlag">
            <template slot-scope="scope">
                <span>{{scope.row.endFlag===0?"未结束":"已结束"}}</span>
            </template>
            </el-table-column>
            <el-table-column
            label="操作">
            <template slot-scope="scope">
              <el-link type="danger" size="small" @click="deleteCouponEntityById(scope.row.id)">删除</el-link>
              <el-link type="success" size="small" @click="openUpdateCouponEntityDialogVisible(scope.row)" style="margin-left:10px">编辑</el-link>
            </template>
            </el-table-column>
        </el-table>
    </div>
    </div>
    <!-- 分页 -->
    <div style="margin-top: 20px;">
        <template>
            <div class="block">
                <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="10"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                </el-pagination>
            </div>
        </template>
    </div>

    <!-- 添加弹窗 -->
    <el-dialog
        title="添加"
        :visible.sync="saveCouponEntityDialogVisible"
        :before-close="closeExpertFormDialog"
        width="40%"
        >
        <!-- form表单 -->
        <el-form :model="tableDataForm" ref="ruleForm" label-width="100px" class="demo-ruleForm" style="text-align: left;">
            <el-form-item label="优惠劵名称" prop="couponName">
                <el-input v-model="tableDataForm.couponName" style="width: 200px;"></el-input>
            </el-form-item>
            <el-form-item label="优惠劵规则" prop="couponRule">
                <el-input v-model="tableDataForm.couponRule" style="width: 200px;"></el-input>
            </el-form-item>
            <el-form-item label="优惠价钱" prop="couponPrice">
                <el-input v-model="tableDataForm.couponPrice" style="width: 200px;"></el-input>
            </el-form-item>
            <el-form-item label="使用规则" prop="couponUseRule">
                <el-select v-model="tableDataForm.couponUseRule" placeholder="请选择优惠劵使用规则">
                    <el-option label="无门槛" value="1"></el-option>
                    <el-option label="早餐" value="2"></el-option>
                    <el-option label="夜宵" value="3"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="吃货豆规则" prop="foodieBeanRule">
                <el-select v-model="tableDataForm.foodieBeanRule" placeholder="请选择优惠劵使用规则">
                    <el-option label="不可以使用吃货豆" value="0"></el-option>
                    <el-option label="可以使用吃货豆" value="1"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="吃货豆数量" prop="foodieBeanNumber" v-if="tableDataForm.foodieBeanRule==1">
                <el-input v-model="tableDataForm.foodieBeanNumber" style="width: 200px;"></el-input>
            </el-form-item>
            <el-form-item label="开始时间" prop="startTime">
                <el-date-picker
                    v-model="tableDataForm.startTime"
                    type="datetime"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    placeholder="选择日期时间" >
                </el-date-picker>
            </el-form-item>
            <el-form-item label="结束时间" prop="endTime">
                <el-date-picker
                    v-model="tableDataForm.endTime"
                    type="datetime"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    placeholder="选择日期时间">
                </el-date-picker>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="resetForm('ruleForm')">取 消</el-button>
            <el-button type="primary" @click="saveCouponEntity('ruleForm')">确 定</el-button>
        </span>
    </el-dialog>

    <!-- 修改弹窗 -->
    <el-dialog
        title="修改"
        :visible.sync="updateCouponEntityDialogVisible"
        :before-close="closeExpertFormDialog"
        width="40%"
        >
        <!-- form表单 -->
        <el-form :model="tableDataForm" ref="ruleForm" label-width="100px" class="demo-ruleForm" style="text-align: left;">
            <el-form-item label="优惠劵名称" prop="couponName">
                <el-input v-model="tableDataForm.couponName" style="width: 200px;"></el-input>
            </el-form-item>
            <el-form-item label="优惠劵规则" prop="couponRule">
                <el-input v-model="tableDataForm.couponRule" style="width: 200px;"></el-input>
            </el-form-item>
            <el-form-item label="优惠价钱" prop="couponPrice">
                <el-input v-model="tableDataForm.couponPrice" style="width: 200px;"></el-input>
            </el-form-item>
            <el-form-item label="使用规则" prop="couponUseRule">
                <el-select v-model="tableDataForm.couponUseRule" placeholder="请选择优惠劵使用规则">
                    <el-option label="无门槛" :value="1"></el-option>
                    <el-option label="早餐" :value="2"></el-option>
                    <el-option label="夜宵" :value="3"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="吃货豆规则" prop="foodieBeanRule">
                <el-select v-model="tableDataForm.foodieBeanRule" placeholder="请选择优惠劵使用规则">
                    <el-option label="不可以使用吃货豆" :value="0"></el-option>
                    <el-option label="可以使用吃货豆" :value="1"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="吃货豆数量" prop="foodieBeanNumber" v-if="tableDataForm.foodieBeanRule==1">
                <el-input v-model="tableDataForm.foodieBeanNumber" style="width: 200px;"></el-input>
            </el-form-item>
            <el-form-item label="开始时间" prop="startTime">
                <el-date-picker
                    v-model="tableDataForm.startTime"
                    type="datetime"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    placeholder="选择日期时间" >
                </el-date-picker>
            </el-form-item>
            <el-form-item label="结束时间" prop="endTime">
                <el-date-picker
                    v-model="tableDataForm.endTime"
                    type="datetime"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    placeholder="选择日期时间">
                </el-date-picker>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="resetForm('ruleForm')">取 消</el-button>
            <el-button type="primary" @click="updateCouponEntity('ruleForm')">确 定</el-button>
        </span>
    </el-dialog>
    </el-card>
  </div>
</template>
<script>
export default {
  data () {
    return {
      // 修改弹窗
      updateCouponEntityDialogVisible: false,
      // 修改，添加数据集
      tableDataForm: {},
      // 添加弹窗
      saveCouponEntityDialogVisible: false,
      // 模糊查 结束标识
      endFlag: '',
      // 模糊查 吃货豆规则
      foodieBeanRule: '',
      // 模糊查 优惠劵使用规则
      couponUseRule: '',
      // 模糊查 优惠劵名称
      couponName: '',
      // 全查吃货豆表数据集
      tableData: [],
      // 分页 （pageSize）一页展示10条数据 （pageNum）当前页
      pageRequest: {
        pageSize: 10,
        pageNum: 1
      },
      // 分页 前往第1页
      currentPage: 1,
      // 分页
      total: 0
    }
  },
  mounted () {
    // 全查吃货豆表
    this.selectFoodieBeanEntityList()
  },
  methods: {
    // 删除
    deleteCouponEntityById (data) {
      this.$confirm('此操作将删除该优惠劵, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.delete('/eat-service/coupon/deleteCouponEntityById',
          {
            params: {
              id: data
            }
          }).then(res => {
          if (res.status === 200) {
            this.myMessage('success', '删除成功')
            this.selectFoodieBeanEntityList()
          } else {
            this.myMessage('warning', '删除失败')
          }
        }).catch(res => {
          this.myMessage('erroe', '删除失败，请联系管理员')
        })
      }).catch(() => {
        this.myMessage('info', '已取消删除')
      })
    },
    // 修改吃货豆
    updateCouponEntity (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$axios.put('/eat-service/coupon/updateCouponEntity', this.tableDataForm
          ).then(res => {
            debugger
            if (res.data.flag === true) {
              this.myMessage('success', '恭喜你，操作成功！') // 成功提示
              this.updateCouponEntityDialogVisible = false // 关闭窗口
              this.tableDataForm = {
              }
              this.selectFoodieBeanEntityList()
            } else {
              this.myMessage('warning', res.data.obj) // 提示消息
            }
          }).catch(error => {
            console.log(error)
            this.myMessage('warning', '对不起，保存失败！')
          })
        } else {
          this.myMessage('warning', '请补全内容')
          return false
        }
      })
    },
    // 打开修改窗口
    openUpdateCouponEntityDialogVisible (data) {
      this.updateCouponEntityDialogVisible = true
      this.tableDataForm = JSON.parse(JSON.stringify(data))
    },
    // 添加吃货豆
    saveCouponEntity (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$axios.post('/eat-service/coupon/saveCouponEntity', this.tableDataForm
          ).then(res => {
            debugger
            if (res.data.flag === true) {
              this.myMessage('success', '恭喜你，操作成功！') // 成功提示
              this.saveCouponEntityDialogVisible = false // 关闭窗口
              this.tableDataForm = {
              }
              this.selectFoodieBeanEntityList()
            } else {
              this.myMessage('warning', res.data.obj) // 提示消息
            }
          }).catch(error => {
            console.log(error)
            this.myMessage('warning', '对不起，保存失败！')
          })
        } else {
          this.myMessage('warning', '请补全内容')
          return false
        }
      })
    },
    // 添加弹窗里的取消按钮 点击取消是清空from表单数据
    resetForm (formName) {
      this.$refs[formName].resetFields()
      //   this.updateFoodieCardPriceEntityDialogVisible = false
      this.saveCouponEntityDialogVisible = false
    },
    // 添加点击X关闭是清空from表单数据
    closeExpertFormDialog (done) {
      this.$refs.ruleForm.resetFields()
      done()
      // done 用于关闭 Dialog
    },
    // 打开添加窗口
    openSaveCouponEntityDialogVisible () {
      this.saveCouponEntityDialogVisible = true
      this.tableDataForm = {
        id: 0
      }
    },
    // 清空模糊查询条件，并刷新全查
    empty () {
      this.endFlag = ''
      this.foodieBeanRule = ''
      this.couponUseRule = ''
      this.couponName = ''
      this.selectFoodieBeanEntityList()
    },
    // 全查吃货豆类型表（模糊查用户名称）
    selectFoodieBeanEntityList () {
      this.$axios.get('/eat-service/coupon/selectCouponEntityList',
        {
          params: {
            endFlag: this.endFlag,
            foodieBeanRule: this.foodieBeanRule,
            couponUseRule: this.couponUseRule,
            couponName: this.couponName,
            pageSize: this.pageRequest.pageSize,
            pageNum: this.pageRequest.pageNum
          }
        }
      ).then(res => {
        this.tableData = res.data.content
        this.total = res.data.total
      }).catch(error => {
        console.log(error)
      })
    },
    // 分页 每页条数
    handleSizeChange (val) {
      this.pageRequest.pageSize = val
      this.selectFoodieBeanEntityList()
    },
    // 分页 当前页
    handleCurrentChange (val) {
      this.pageRequest.pageNum = val
      this.selectFoodieBeanEntityList()
    },
    // 弹窗提示
    myMessage (type, message) {
      this.$message({
        type: type,
        message: message
      })
    }
  }
}
</script>

<style>
    .abvoeBox{
        width: 100%;
        height: 60px;
        text-align: left;
        margin-top: 5px;
        /* background-color: royalblue; */
        /* position: relative; */
    }
    .abvoeBox_input{
        width: 200px;
        height: 50px;
        margin-left: 10px;
        /* position: absolute; */
    }
    .belowBox{
        margin-top: 20px;
    }
    .belowBox{
        margin-top: 20px;
    }
    .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>
